<template>
	<view class="user_info">
		<!-- 顶部背景 -->
		<div class="head_user">
			<div class="user">
				<image class="user_fl" @click="chooseUploads" :src="currentImg" mode=""></image>
				<div class="user_fr">
					<div>{{userInfo.user_nickname}}
						<div class="tians"><span>{{userInfo.day || 0}}天</span></div>
					</div>
					<p>账 号：{{userInfo.mobile}}</p>
				</div>
			</div>
		</div>
		<!-- 下方列表 -->
		<view class="operating">
			<view class="operating_item" @click="gotunewPage('0')">
				<image class="image_fl" src="../../static/image/my_one@2x.png" mode=""></image>
				<span>修改密码</span>
				<image class="image_fr" src="../../static/image/my_arrow@2x.png" mode=""></image>
			</view>
			<view class="operating_item" @click="gotunewPage('1')">
				<image class="image_fl" src="../../static/image/my_two@2x.png" mode=""></image>
				<span>意见反馈</span>
				<image class="image_fr" src="../../static/image/my_arrow@2x.png" mode=""></image>
			</view>
			<view class="operating_item" @click="gotunewPage('2')">
				<image class="image_fl" src="../../static/image/banben.png" mode=""></image>
				<span>版本更新</span>
				<image class="image_fr" src="../../static/image/my_arrow@2x.png" mode=""></image>
			</view>
			<view class="operating_item" @click="gotunewPage('4')">
				<image class="image_fl" src="../../static/image/lianxi.png" mode=""></image>
				<span>联系我们</span>
				<image class="image_fr" src="../../static/image/my_arrow@2x.png" mode=""></image>
			</view>
			<view class="operating_item" @click="gotunewPage('3')">
				<image class="image_fl" src="../../static/image/my_three@2x.png" mode=""></image>
				<span>退出</span>
				<image class="image_fr" src="../../static/image/my_arrow@2x.png" mode=""></image>
			</view>
		 
		</view>
	</view>
</template>

<script>
	import { pathToBase64 } from '../../components/gsq-image-tools/image-tools/index.js'
	export default {
		data() {
			return {
				userInfo: '',
				// 展示的图片
				uploads: [],
				// 上传的图片地址
				uploadImage: '',
				// 用户头像
				currentImg: '../../static/image/my_three@2x.png'

			};
		},
		mounted() {
			this.getUserInfo()
			// 获取当前页面头像
			uni.getStorage({
				key: 'userImg',
				success: (res) => {
					this.currentImg = res.data

				}
			})
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				this.$http({
					url: '/wxapi/UserApi/getUserInfo',
					method: 'POST'
				}).then(res => {
					if (res.code == 200) {
						this.userInfo = res.data
					}
				})
			},
			
			gotunewPage(type) { 
				let goToPageUrl;
				switch(type){
					case '0':
					  goToPageUrl = '../changePass/changePass'
					break;
					case '1':
					  goToPageUrl = '../feedBack/feedBack'
					break;
					case '2':
					  goToPageUrl = '../version/version'
					break; 
					case '3': 
					uni.showModal({
						// title: '温馨提示',
						content:'确认退出吗？',
						success({confirm}){ 
							if(confirm){ 
								// 删除本地token
								uni.removeStorage({
									key: 'token',
									success: function(res) {
										uni.reLaunch({
											url: '../login/Login'
										});
									}
								}) 
							} 
						} 
					}) 
					break; 
					case '4':
					  goToPageUrl = '../contacts/contacts'
					break;
				} 
					uni.navigateTo({
						url: goToPageUrl
					});
			},
			 
			
			// 上传图片
			chooseUploads() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否更换头像',
					showCancel: true,
					success: (res) => {
						// 用户选择确定
						if (res.confirm) {
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album', 'camera'], //从相册选择
								success: (res) => {
									pathToBase64(res.tempFilePaths[0]).then(res => {
										that.uploadsUserHeadImg(res)
									})
								},
								fail: (err) => {
									uni.showModal({
										content: JSON.stringify(err)
									});
								}
							});
						} else {
							console.log('取消')
						}
					}
				})
			},


			// 图片上传
			uploadsUserHeadImg(file) {
				this.$http({
					url: '/wxapi/UserApi/uploadsUserHeadImg',
					method: 'POST',
					data: {
						file
					}
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						// 存储
						uni.setStorageSync('userImg',res.data);
						// 获取
						uni.getStorage({
							key: 'userImg',
							success: (res) => {
								console.log(res)
								this.currentImg = res.data
							}
						})
					}
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="less">
	.user_info {
		height: 100%;
		background-color: #f3f5f7;

		.head_user {
			position: relative;
			height: 340rpx;
			background: url(../../static/image/my_bg@2x.png) no-repeat;
			background-size: 100% 100%;

			.user {
				display: flex;
				position: absolute;
				top: 170rpx;
				left: 50%;
				transform: translate(-50%);
				padding: 30rpx;
				width: 640rpx;
				height: 150rpx;
				color: #333;
				font-size: 36rpx;
				background: #fff;
				border-radius: 15rpx;

				.user_fl {
					margin-right: 40rpx;
					width: 133rpx;
					height: 133rpx;
					border-radius: 50%;
				}

				.user_fr {
					flex: 1;
					line-height: 60rpx;
					font-size: 28rpx;

					.tians {
						margin-left: 28rpx;
						display: inline-block;
						width: 122rpx;
						height: 40rpx;
						line-height: 40rpx;
						font-size: 20rpx;
						color: #fff;
						background: url(../../static/image/my_day@2x.png) no-repeat;
						background-size: 100% 100%;

						span {
							margin-left: 42rpx;
						}
					}

					p {
						color: #999;
						font-size: 24rpx;
					}
				}
			}
		}

		.operating {
			padding: 30rpx;
			margin: 0 30rpx;
			margin-top: 100rpx;
			background: #fff;

			.operating_item {
				display: flex;
				height: 130rpx;
				line-height: 130rpx;

				.image_fl {
					margin: auto 0;
					width: 62rpx;
					height: 62rpx;
				}

				span {
					flex: 1;
					margin-left: 30rpx;
				}

				.image_fr {
					margin: auto 0;
					width: 22rpx;
					height: 22rpx;
				}
			}
		}
	}
</style>
